<script setup>
import router from "@/router/index.js";

defineProps({
  t1: String,
  t2: String,
  t1Url: {},
  t2Url: {},
  pl: Boolean
})
</script>

<template>
  <div class = "header d-flex">
    <div class = "p-2 title">
      <span @click = "router.push(t1Url)">{{ t1 }}</span>
      <span @click = "router.push(t2Url)">{{ t2 }}</span>
    </div>
    <div class = "p-2 iconV d-flex">
      <span v-if = "!pl"><svg t = "1738824418742" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
                              xmlns = "http://www.w3.org/2000/svg" p-id = "4195" width = "32" height = "32"><path
          d = "M959.9 857.3L745.8 666.9c38.9-58.6 61.6-128.9 61.6-204.4 0-204.3-166.2-370.6-370.6-370.6S66.3 258.2 66.3 462.5s166.2 370.6 370.6 370.6c94.1 0 180.1-35.3 245.6-93.3l213.4 189.7 64-72.2z m-523.1-96.6c-164.4 0-298.2-133.8-298.2-298.2s133.8-298.2 298.2-298.2S735 298.1 735 462.5 601.2 760.7 436.8 760.7z"
          fill = "#2c2c2c" p-id = "4196"></path></svg></span>
      <span v-if = "pl" @click = "router.push({name:'setting'})"><svg t = "1740038214385" class = "icon"
                                                                      viewBox = "0 0 1024 1024" version = "1.1"
                                                                      xmlns = "http://www.w3.org/2000/svg" p-id = "5000"
                                                                      width = "32" height = "32"><path
          d = "M944.48 552.458667l-182.357333 330.666666a73.792 73.792 0 0 1-64.565334 38.325334h-362.133333a73.792 73.792 0 0 1-64.565333-38.325334l-182.357334-330.666666a75.338667 75.338667 0 0 1 0-72.682667l182.357334-330.666667a73.792 73.792 0 0 1 64.565333-38.325333h362.133333a73.792 73.792 0 0 1 64.565334 38.325333l182.357333 330.666667a75.338667 75.338667 0 0 1 0 72.682667z m-55.989333-31.146667a10.773333 10.773333 0 0 0 0-10.378667l-182.037334-330.666666a10.517333 10.517333 0 0 0-9.205333-5.482667H335.733333a10.517333 10.517333 0 0 0-9.205333 5.482667l-182.037333 330.666666a10.773333 10.773333 0 0 0 0 10.378667l182.037333 330.666667a10.517333 10.517333 0 0 0 9.205333 5.472h361.514667a10.517333 10.517333 0 0 0 9.205333-5.472l182.037334-330.666667zM513.738667 682.666667c-94.261333 0-170.666667-76.405333-170.666667-170.666667s76.405333-170.666667 170.666667-170.666667c94.250667 0 170.666667 76.405333 170.666666 170.666667s-76.416 170.666667-170.666666 170.666667z m0-64c58.912 0 106.666667-47.754667 106.666666-106.666667s-47.754667-106.666667-106.666666-106.666667-106.666667 47.754667-106.666667 106.666667 47.754667 106.666667 106.666667 106.666667z"
          fill = "#000000" p-id = "5001"></path></svg></span>
      <span @click = "router.push({name:'talkBot'})"><svg t = "1738824446301" class = "icon" viewBox = "0 0 1024 1024"
                                                          version = "1.1"
                                                          xmlns = "http://www.w3.org/2000/svg" p-id = "5273"
                                                          width = "32" height = "32"><path
          d = "M856.917333 876.373333H190.805333c-56.490667 0-102.4-45.909333-102.4-102.4V290.304c0-56.490667 45.909333-102.4 102.4-102.4h666.282667c56.490667 0 102.4 45.909333 102.4 102.4v483.669333c-0.170667 56.490667-46.08 102.4-102.570667 102.4zM190.805333 256.170667c-18.773333 0-34.133333 15.36-34.133333 34.133333v483.669333c0 18.773333 15.36 34.133333 34.133333 34.133334h666.282667c18.773333 0 34.133333-15.36 34.133333-34.133334V290.304c0-18.773333-15.36-34.133333-34.133333-34.133333H190.805333z"
          fill = "#2c2c2c" p-id = "5274"></path><path
          d = "M523.946667 647.68c-6.314667 0-12.629333-1.706667-18.090667-5.290667L276.650667 498.346667c-16.042667-10.069333-20.821333-31.061333-10.752-47.104s31.061333-20.821333 47.104-10.752l210.944 132.608 210.944-132.608c15.872-10.069333 37.034667-5.290667 47.104 10.752 10.069333 15.872 5.290667 37.034667-10.752 47.104l-229.034667 144.042666c-5.802667 3.413333-11.946667 5.290667-18.261333 5.290667z"
          fill = "#2c2c2c" p-id = "5275"></path></svg></span>
    </div>
  </div>
</template>

<style scoped>
.header {
  position: fixed;
  width: 416px;
  background-color: white;
  z-index: 2;
}

.title span {
  font-size: 20px;
  cursor: pointer;
}

.title span:last-child {
  margin-left: 10px;
}

.iconV {
  position: absolute;
  right: 14%;
  width: 30px;
}

.iconV span {
  cursor: pointer;
}

.iconV span:last-child {
  margin-left: 10px;
}
</style>